<template>
  <div class="mod-config">
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
      <el-form-item>
        <el-input
          v-model="dataForm.key"
          placeholder="患者姓名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button
          v-if="isAuth('generator:order:save')"
          type="primary"
          @click="addOrUpdateHandle()"
          >新增
        </el-button>
        <el-button
          v-if="isAuth('generator:order:delete')"
          type="danger"
          @click="deleteHandle()"
          :disabled="dataListSelections.length <= 0"
          >批量删除
        </el-button>
        <el-button
          type="success"
          @click.prevent="exportExcel"
          icon="el-icon-download"
          size="medium"
          >导出</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      class="table"
      fixed="false"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;"
    >
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50"
      >
      </el-table-column>
      <el-table-column
        prop="oid"
        header-align="center"
        align="center"
        label="门诊编号"
      >
      </el-table-column>
      <el-table-column
        prop="odepartment"
        header-align="center"
        align="center"
        label="科室"
      >
      </el-table-column>
      <el-table-column
        prop="oresult"
        header-align="center"
        align="center"
        label="诊断结果"
      >
      </el-table-column>
      <el-table-column
        prop="ostime"
        header-align="center"
        align="center"
        label="开始时间"
      >
      </el-table-column>
      <el-table-column
        prop="oetime"
        header-align="center"
        align="center"
        label="结束时间"
      >
      </el-table-column>
      <el-table-column
        prop="opatientname"
        header-align="center"
        align="center"
        label="患者"
      >
      </el-table-column>
      <el-table-column
        prop="odname"
        header-align="center"
        align="center"
        label="诊断医师"
      >
      </el-table-column>
      <el-table-column
        prop="omessage"
        header-align="center"
        align="center"
        label="诊断建议"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="addOrUpdateHandle(scope.row.oid)"
            plain
            >修改
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="deleteHandle(scope.row.oid)"
            plain
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
    ></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from "./order-add-or-update";
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  data() {
    return {
      dataForm: {
        key: ""
      },
      props: {
        id: {
          type: String,
          default: "Table"
        },
        name: {
          type: String,
          default: "Table"
        }
      },
      
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      patientnames: "",
      dialogTableVisible: false,
      formLabelWidth: "120px",
      downloadLoading: false
    };
  },
  components: {
    AddOrUpdate
  },
  activated() {
    this.getDataList();
  },
  methods: {
    // 导出
    exportExcel1() {
      /* 从表生成工作簿对象 */
      var wb = XLSX.utils.table_to_book(document.querySelector(" .table "));
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        // Blob 对象表示一个不可变、原始数据的类文件对象。
        // Blob 表示的不一定是JavaScript原生格式的数据。
        // File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
        // 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          // 设置导出文件名称
          "体检报告单.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    exportExcel() {
      this.downloadLoading = true;
      import("@/vnedor/Export2Excel").then(excel => {
        const tHeader = [
          "科室",
          "诊断结果",
          "开始时间",
          "结束时间",
          "患者",
          "诊断医师",
          "诊断建议"
        ];
        const filterVal = [
          "odepartment",
          "oresult",
          "ostime",
          "oetime",
          "opatientname",
          "odoctorname",
          "omessage"
        ]; 
        const List = this.dataList 
        const data = this.formatJson(filterVal, List);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "体检报告单",
          autoWidth: true,
          bookType:'xlsx'
        });
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    },
  
  // 获取数据列表
  getDataList() {
    this.dataListLoading = true;
    this.$http({
      url: this.$http.adornUrl("/generator/order/list"),
      method: "get",
      params: this.$http.adornParams({
        page: this.pageIndex,
        limit: this.pageSize,
        key: this.dataForm.key
      })
    }).then(({ data }) => {
      if (data && data.code === 0) {
        this.dataList = data.page.list;
        this.totalPage = data.page.totalCount;
      } else {
        this.dataList = [];
        this.totalPage = 0;
      }
      this.dataListLoading = false;
    });
  },
  // 每页数
  sizeChangeHandle(val) {
    this.pageSize = val;
    this.pageIndex = 1;
    this.getDataList();
  },
  // 当前页
  currentChangeHandle(val) {
    this.pageIndex = val;
    this.getDataList();
  },
  // 多选
  selectionChangeHandle(val) {
    this.dataListSelections = val;
  },
  // 新增 / 修改
  addOrUpdateHandle(id) {
    this.addOrUpdateVisible = true;
    this.$nextTick(() => {
      this.$refs.addOrUpdate.init(id);
    });
  },
  // 删除
  deleteHandle(id) {
    var ids = id
      ? [id]
      : this.dataListSelections.map(item => {
          return item.oid;
        });
    this.$confirm(
      `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    ).then(() => {
      this.$http({
        url: this.$http.adornUrl("/generator/order/delete"),
        method: "post",
        data: this.$http.adornData(ids, false)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.getDataList();
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    });
  }
  }
};
</script>
<style scoped>
.table {
}
</style>
